<!--主页面  -->
<template>
  <div class="common-layout">
    <el-container>
      <el-aside :style="{ width: !isFold ? '210px' : '60px' }" class="main_aside">
        <nav-menu :isFold="isFold"></nav-menu>
      </el-aside>
      <el-container>
        <el-header class="header">
          <nav-header-vue @changeFold="handleChangeFold"></nav-header-vue>
        </el-header>
        <el-main class="main_container">
          <div class="main_content">

            <router-view v-slot="{ Component }">
           <transition name="MainFade" mode="out-in">
              <component :is="Component" />
            </transition>
          </router-view>


          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script setup lang="ts">
import { ref,computed } from "vue"
import NavMenu from '@/components/nav-menu';
import NavHeaderVue from '@/components/nav-header/src/nav-header.vue';
import { useStore } from "@/store"
const store = useStore()
const isFold = computed(()=> store.state.defaultConfig.isFold)
const handleChangeFold = (val: boolean) => {


   store.dispatch('defaultConfig/isFoldAction',val)
}
</script>

<style lang="less" scoped>
.header {

  color: rgba(@primaryHeaderColor, 1);
  background: rgba(@primaryHeaderBgColor, 1);
}

.main_aside {
  height: 100vh;
  transition: all 0.5s;
  color: rgba(@primaryMenuTextColor, 1);
  background: rgba(@primaryMenuColor, 0.95);
  z-index: 999;
}

.main_container {
  background: #eee;
  height: 80vh;
  overflow: scroll;
  z-index: 9;

}

.MainFade-enter-from, .MainFade-leave-to {
  opacity: 0;
}
.MainFade-enter-to, .MainFade-leave-from {
  opacity: 1;
}
.MainFade-enter-active,
.MainFade-leave-active {
  transition: opacity 0.2s;
}


</style>
